<template>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
      <defs>
        <symbol viewBox="0 0 26 31" id="location">
          <path fill="#FFF" fill-rule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
        </symbol>
        <symbol viewBox="0 0 14 8" id="arrow">
          <path fill="#FFF" fill-rule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
        </symbol>
        <symbol viewBox="0 0 28 33" id="arrow-left">
          <path fill-rule="evenodd" d="M17.655 1.853L15.961.159.033 16.072 15.961 32l1.694-1.694L3.429 16.08 17.655 1.854z" class="path1"></path>
        </symbol>
      </defs>
    </svg>
    <header class="index-header-wrap">
      <div class="index-header">
        <div class="index-header-position">
          <svg class="index-header-position-icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#location"></use>
          </svg>
          <span class="index-header-position-txt">黄浦区人民广场上海市委(人民大道北)</span>
          <svg class="index-header-position-arrow">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow"></use>
          </svg>
        </div>
        <aside class="index-header-temp">
          <div><h2 class="index-header-temp-num">38°</h2>
            <p>高温</p></div>
          <img alt="天气图标" class="index-header-temp-icon" src="https://fuss10.elemecdn.com/1/88/c2a212a47c114764a7a97cbecfc3cpng.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/">
        </aside>
      </div>
      <input type="text" placeholder="搜索商家、商品" aria-label="搜索商家、商品" class="index-header-searchinput">
      <div class="index-header-searchwords">
        <a v-if="searchWords" v-for="(word,index) in searchWords">{{ word.word }}</a>
        </div>
    </header>
  </div>
</template>

<script>
  const ERROR_STATUS_OK = 0;
  import IndexAPI from '../../exchange/indexAPI.js';
  export default {
    name: 'Header',
    data () {
      return {
        searchWords: []
      };
    },
    created () {
      IndexAPI.getHotWords().then(data => {
        if (data && data.errno === ERROR_STATUS_OK) {
          this.searchWords = data.datas;
        }
      })
    },
    computed: {},
    components: {}
  };
</script>

<style>
  .index-header-wrap {
    padding: .5rem .5rem;
    background-image: -webkit-linear-gradient(left,#0af,#0085ff);
    background-image: linear-gradient(90deg,#0af,#0085ff);
    color: #fff;
    height:5.833333rem
  }

  .index-header {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 1.666666rem
  }

  .index-header-position,.index-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
  }

  .index-header-position {
    width: 60%
  }

  .index-header-position-icon {
    width: .346667rem;
    height: .413333rem;
    fill: #fff
  }

  .index-header-position-arrow {
    width: .186667rem;
    height: .093333rem;
    fill: #fff
  }

  .index-header-position-txt {
    margin: 0 .133333rem;
    font-size: .48rem;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .index-header-searchinput {
    display: block;
    margin: .3333rem 0;
    width: 100%;
    height: 36px;
    text-align: center;
    border-radius: 36px;
    box-shadow: 0 .026667rem .066667rem 0 rgba(0,0,0,.2);
    color: #333;
    font-size: .6rem
  }

  .index-header-searchinput::-webkit-input-placeholder {
    color: #333
  }

  .index-header-searchinput:-ms-input-placeholder {
    color: #333
  }

  .index-header-searchinput::placeholder {
    color: #333
  }

  .index-header-searchwords {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    overflow-x: auto
  }

  .index-header-searchwords a {
    font-size:12px;
    color: currentColor
  }

  .index-header-searchwords a:not(:last-child) {
    margin-right: .4rem
  }

  .index-header-temp {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: right
  }
  .index-header-temp p{
    font-size:12px;
  }

  .index-header-temp-num {
    font-size: .666666rem
  }

  .index-_X2RT {
    font-size: .266667rem
  }

  .index-header-temp-icon {
    margin-left: .106667rem;
    width: .733333rem;
    height: .733333rem
  }

  .poi-3TsQq_0 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    overflow: auto;
    background-color: #f4f4f4;
    -webkit-animation: poi-1F-EI_0 .3s;
    animation: poi-1F-EI_0 .3s;
    -webkit-overflow-scrolling: touch
  }

  .poi-2PxTv_0 {
    position: fixed;
    width: 100%;
    color: #fff;
    background-image: -webkit-linear-gradient(left,#0af,#0085ff);
    background-image: linear-gradient(90deg,#0af,#0085ff);
    text-align: center;
    font-size: .32rem;
    padding-bottom: .32rem
  }

  .poi-3ndyq_0 {
    height: 2.346667rem
  }

  .poi-2T3Ra_0 {
    line-height: 1.173333rem;
    font-size: .48rem
  }

  .poi-1bd4J_0 {
    position: absolute;
    left: .333333rem;
    top: .333333rem;
    fill: #fff;
    width: .533333rem;
    height: .533333rem
  }

  .poi-i4JjZ_0 {
    margin-top: .133333rem;
    width: 90%;
    height: .733333rem;
    border-radius: .733333rem;
    padding: 0 .48rem;
    font-size: .346667rem
  }

  .poi-3pogo_0>h4 {
    padding: .266667rem .4rem;
    font-size: .373333rem
  }

  .poi-4wa7l_0 {
    padding-top: 4rem
  }

  .AddressCell-BfZ31_0 {
    font-size: .32rem;
    background-color: #fff;
    padding: .266667rem .4rem
  }

  .AddressCell-BfZ31_0+.AddressCell-BfZ31_0 {
    border-top: 1px solid #eee
  }

  .AddressCell-3dWFD_0 {
    font-weight: 700;
    font-size: .373333rem
  }

  .AddressCell-2NFpU_0 {
    margin-left: .133333rem
  }

  .AddressCell-2WH1g_0 {
    color: #999;
    font-size: .32rem
  }

  .foodentry {
    overflow: hidden;
    height: 4.72rem;
    background-color: #fff;
    text-align: center
  }

  .foodentry a {
    position: relative;
    float: left;
    margin-top: .293333rem;
    width: 25%
  }

  .foodentry img {
    width: 1.066667rem;
    height: 1.066667rem;
    vertical-align: top
  }

  .foodentry .title {
    display: block;
    margin-top: .133333rem;
    color: #666;
    font-size: .32rem
  }

  .foodentry .service {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
    background-color: rgba(0,0,0,.6);
    color: #fff;
    font-size: .24rem;
    line-height: .533333rem;
    border-radius: 0 0 .8rem .8rem
  }

  .foodentry .container {
    position: relative;
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem
  }

  .foodentry .container img {
    border-radius: 50%;
    width: 100%;
    height: 100%
  }

  .foodentry .mint-swipe-indicator {
    margin: 0 .066667rem
  }

  .foodentry .mint-swipe-indicator.is-active {
    background-color: #000;
    opacity: .6
  }

  section[data-v-41ae3b7f] {
    background-color: #fff;
    padding: .266667rem .533333rem;
    color: #666;
    font-size: .32rem;
    margin-bottom: .266667rem;
    border-bottom: 1px solid #ddd
  }

</style>
